<template>
  <div>
    <el-container>
      <el-header>
        <el-row><el-col :span="2"> 角色管理 </el-col></el-row>
      </el-header>
      <el-main>
        <el-button
          icon="el-icon-plus"
          @click="dialogVisibleinsert = true"
          circle
        ></el-button>
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          stripe
          @row-dblclick="qx"
        >
          <el-table-column prop="RoleID" label="ID" align="center">
          </el-table-column>
          <el-table-column prop="Rolename" label="角色ID" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="cz(scope.row)"
                >编辑</el-button
              >
              <el-button size="mini" type="danger" @click="delt(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-row>
          <el-col :span="1">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[3, 6, 9, 12]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="rows"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-main>
    </el-container>

    <el-dialog
      title="角色ID添加"
      :visible.sync="dialogVisibleinsert"
      width="50%"
    >
      <el-form
        ref="forminsert"
        :model="forminsert"
        :rules="formruleinsert"
        label-width="80px"
      >
        <el-form-item label="角色ID" prop="Rolename">
          <el-input v-model="forminsert.Rolename"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleinsert = false">取 消</el-button>
        <el-button type="primary" @click="insert('forminsert')"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog title="用户修改" :visible.sync="dialogVisibleUpdate" width="50%">
      <el-form
        ref="formUpdate"
        :model="formUpdate"
        :rules="formruleUpdate"
        label-width="80px"
      >
        <el-form-item label="角色ID" prop="Rolename">
          <el-input v-model="formUpdate.Rolename"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleUpdate = false">取 消</el-button>
        <el-button type="primary" @click="upd('formUpdate')">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="权限修改"
      :visible.sync="dialogVisibleinsert1"
      width="50%"
    >
      <el-tree
        :show-checkbox="true"
        :data="Gettype"
        :props="treeProps"
        node-key="id"
        ref="righttree"
        :default-expand-all="true"
        :default-checked-keys="treeData"
      >
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleinsert1 = false">取 消</el-button>
        <el-button type="primary" @click="upd1()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  Type1,
  Insertid,
  Updid,
  Detid,
  Gettypezc,
  gtp1,
  Gettype2,
  Deletqx,
  Updaeqx,
  CreateTree,
} from "../http/user.js";
import qs from "qs";
import user from "../components/user.vue";
export default {
  data() {
    return {
      RoleID: "",
      dialogVisibleinsert1: false,
      pageSize: 3,
      //当前页
      currentPage: 1,
      //总行数
      rows: 1,
      Gettype: [],
      treeData: [],
      treeProps: {
        children: "children",
        label: "type",
      },
      tableData: [],
      dialogVisibleinsert: false,
      forminsert: {
        Rolename: "",
        RoleID: "",
      },
      formruleinsert: {
        Rolename: [
          { required: true, message: "请输入角色ID", trigger: "blur" },
        ],
      },
      dialogVisibleUpdate: false,
      formUpdate: {
        Rolename: "",
        RoleID: "",
      },
      formruleUpdate: {
        Rolename: [
          { required: true, message: "请输入角色ID", trigger: "blur" },
        ],
      },
    };
  },
  comments: {
    user,
  },
  methods: {
    upd1() {
      this.RoleID = this.$store.state.RoleID;
      var getkeys = [
        ...this.$refs.righttree.getCheckedKeys(),
        ...this.$refs.righttree.getHalfCheckedKeys(),
      ];
      var zhi = getkeys;
      console.info(zhi);
      Deletqx({
        params: {
          pid: this.RoleID,
        },
      })
        .then((res) => {
          console.info(res);
          if (res.Message == "删除成功") {
            for (let index in zhi) {
              Updaeqx({
                params: {
                  rid: this.RoleID,
                  i: zhi[index],
                },
              })
                .then((res) => {
                  console.info(res);
                })
                .catch((err) => {
                  console.info(err);
                });
            }
            CreateTree({
              params:{
                pid: this.RoleID,
              }
            })
              .then((res) => {
                console.info(res);
                var data = res.Data;
                //给仓库的字段赋值
                this.$store.commit("setRightList", data);
              })
              .catch((err) => {
                console.info(err);
              });
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.dialogVisibleinsert1 = false;
            this.$router.push("/user");
            this.$router.go(-1);
          }
        })
        .catch((err) => {
          console.info(err);
        });
    },
    qx(row) {
      this.treeData = [];
      this.dialogVisibleinsert1 = true;
      this.RoleID = row.RoleID;
      gtp1({
        params: {
          pid: row.RoleID,
        },
      })
        .then((res) => {
          console.info(res);
          this.Gettype = res.Data;
        })
        .catch((err) => {
          console.info(err);
        });
      Gettype2({
        params: {
          pid: row.RoleID,
        },
      })
        .then((res) => {
          console.info(res);
          this.treeData = 15;
          let io = [];
          for (let index in res.Data) {
            io.push(res.Data[index].PermissionsID);
          }
          this.treeData = io;
        })
        .catch((err) => {
          console.info(err);
        });
    },
    delt(row) {
      if (confirm("确定删除吗")) {
        Detid({
          params: {
            id: row.RoleID,
          },
        })
          .then((res) => {
            if (res.Data == 1) {
              this.$message({
                message: "恭喜你，删除成功",
                type: "success",
              });
              Type1({
                params: {
                  i: this.currentPage,
                  j: this.pageSize,
                },
              })
                .then((res) => {
                  console.log(res);
                  if (res.Data == "") {
                    console.log(2);
                    this.currentPage = this.currentPage - 1;
                    this.sx();
                  } else {
                    this.sx();
                  }
                })
                .catch((err) => {
                  console.log(err);
                });
            }
          })
          .catch((err) => {
            console.info(err);
          });
      }
    },
    upd(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          Updid(qs.stringify(this.formUpdate))
            .then((res) => {
              console.log(res);
              if (res.Data == 1) {
                this.$message({
                  message: "恭喜你，修改成功",
                  type: "success",
                });
                this.dialogVisibleUpdate = false;
                this.sx();
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.$message({
            message: "请填写完整信息",
            type: "error",
          });
          return false;
        }
      });
    },
    cz(row) {
      this.dialogVisibleUpdate = true;
      this.formUpdate.Rolename = row.Rolename;
      this.formUpdate.RoleID = row.RoleID;
    },
    insert(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          Insertid(qs.stringify(this.forminsert))
            .then((res) => {
              console.log(res);
              if (res.Data == 1) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.sx();
                this.dialogVisibleinsert = false;
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.$message({
            message: "请填写完整信息",
            type: "error",
          });
          return false;
        }
      });
    },
    sx() {
      Type1({
        params: {
          i: this.currentPage,
          j: this.pageSize,
        },
      })
        .then((res) => {
          console.log(res);
          this.tableData = res.Data;
          this.rows = res.Row;
        })
        .catch((err) => {
          console.log(err);
        });
      Gettypezc()
        .then((res) => {
          console.log(res);
          this.typedate = res.Data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSizeChange: function (val) {
      this.pageSize = val;
      this.sx();
    },
    handleCurrentChange: function (val) {
      this.currentPage = val;
      this.sx();
    },
  },
  mounted() {
    this.sx();
  },
};
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  border-radius: 15px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  border: solid 5px white;
  padding: 20px;
  margin-top: 20px;
  border-radius: 20px;
}
.el-col-2 {
  width: 8.33333%;
  font-size: 17px;
  font-weight: 900;
}
.el-col-6 {
  width: 37.5%;
  font-size: 1px;
  font-weight: 300;
  color: rgb(83, 83, 83);
}
element.style {
  height: 100%;
  width: 1239px;
}
.el-button.is-circle {
  border-radius: 50%;
  padding: 12px;
  position: relative;
  top: -10px;
  right: -570px;
}
</style>